<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
    template="../templates/ui.xhtml">

	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">TreeTable - Scrolling</h1>

		<div class="entry">
			<p>TreeTable can fix the header/footer and display the data in scrollable format.</p>
			
			<h:form id="form">
	
                <p:treeTable id="yscroll" value="#{documentsController.root}" var="document" scrollable="true" scrollHeight="100">
                    
                    <f:facet name="header">
                        Y Scrolling
                    </f:facet>
                    
					<p:column width="260" headerText="Name">
						<h:outputText value="#{document.name}" />
					</p:column>
					
					<p:column width="160" headerText="Size">
						<h:outputText value="#{document.size}" />
					</p:column>
					
					<p:column width="160" headerText="Type">
						<h:outputText value="#{document.type}" />
					</p:column>
				</p:treeTable>
                
                <br /><br />
                
                <p:treeTable id="xscroll" value="#{documentsController.root}" var="document"
                                scrollable="true" scrollWidth="350">
                    
                    <f:facet name="header">
                        X Scrolling
                    </f:facet>
                    
					<p:column width="150" headerText="Name" footerText="Name">
						<h:outputText value="#{document.name}" />
					</p:column>
					
					<p:column width="100" headerText="Size" footerText="Size" >
						<h:outputText value="#{document.size}" />
					</p:column>
					
					<p:column width="100" headerText="Type" footerText="Type">
						<h:outputText value="#{document.type}" />
					</p:column>
				</p:treeTable>
                
                <br /><br />
                
                <p:treeTable id="xyscroll" value="#{documentsController.root}" var="document" scrollable="true" 
                             scrollHeight="150" scrollWidth="350">
                    
                    <f:facet name="header">
                        X-Y Scrolling
                    </f:facet>
                    
					<p:column width="150" headerText="Name" footerText="Name">
						<h:outputText value="#{document.name}" />
					</p:column>
					
					<p:column width="100" headerText="Size" footerText="Size" >
						<h:outputText value="#{document.size}" />
					</p:column>
					
					<p:column width="100" headerText="Type" footerText="Type">
						<h:outputText value="#{document.type}" />
					</p:column>
				</p:treeTable>

			</h:form>
			
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="treeTableScrolling.xhtml">
					<pre name="code" class="xml">
&lt;h:form id="form">

    &lt;p:treeTable id="yscroll" value="\#{documentsController.root}" var="document" scrollable="true" scrollHeight="100">

        &lt;f:facet name="header">
            Y Scrolling
        &lt;/f:facet>

        &lt;p:column width="260" headerText="Name">
            &lt;h:outputText value="\#{document.name}" />
        &lt;/p:column>

        &lt;p:column width="160" headerText="Size">
            &lt;h:outputText value="\#{document.size}" />
        &lt;/p:column>

        &lt;p:column width="160" headerText="Type">
            &lt;h:outputText value="\#{document.type}" />
        &lt;/p:column>
    &lt;/p:treeTable>

    &lt;br />&lt;br />

    &lt;p:treeTable id="xscroll" value="\#{documentsController.root}" var="document"
                    scrollable="true" scrollWidth="350">

        &lt;f:facet name="header">
            X Scrolling
        &lt;/f:facet>

        &lt;p:column width="150" headerText="Name" footerText="Name">
            &lt;h:outputText value="\#{document.name}" />
        &lt;/p:column>

        &lt;p:column width="100" headerText="Size" footerText="Size" >
            &lt;h:outputText value="\#{document.size}" />
        &lt;/p:column>

        &lt;p:column width="100" headerText="Type" footerText="Type">
            &lt;h:outputText value="\#{document.type}" />
        &lt;/p:column>
    &lt;/p:treeTable>

    &lt;br />&lt;br />

    &lt;p:treeTable id="xyscroll" value="\#{documentsController.root}" var="document" scrollable="true" 
                    scrollHeight="150" scrollWidth="350">

        &lt;f:facet name="header">
            X-Y Scrolling
        &lt;/f:facet>

        &lt;p:column width="150" headerText="Name" footerText="Name">
            &lt;h:outputText value="\#{document.name}" />
        &lt;/p:column>

        &lt;p:column width="100" headerText="Size" footerText="Size" >
            &lt;h:outputText value="\#{document.size}" />
        &lt;/p:column>

        &lt;p:column width="100" headerText="Type" footerText="Type">
            &lt;h:outputText value="\#{document.type}" />
        &lt;/p:column>
    &lt;/p:treeTable>

&lt;/h:form>
					</pre> 
				</p:tab>
				
				<p:tab title="DocumentsController.java">
					<pre name="code" class="java">
package org.primefaces.examples.view;

import java.io.Serializable;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

import org.primefaces.examples.domain.Document;

public class DocumentsController implements Serializable {
	
	private TreeNode root;
	
	public DocumentsController() {
		root = new DefaultTreeNode("root", null);
		
		TreeNode documents = new DefaultTreeNode(new Document("Documents", "-", "Folder"), root);
		TreeNode pictures = new DefaultTreeNode(new Document("Pictures", "-", "Folder"), root);
		TreeNode music = new DefaultTreeNode(new Document("Music", "-", "Folder"), root);
		
		TreeNode work = new DefaultTreeNode(new Document("Work", "-", "Folder"), documents);
		TreeNode primefaces = new DefaultTreeNode(new Document("PrimeFaces", "-", "Folder"), documents);
		
		//Documents
		TreeNode expenses = new DefaultTreeNode("document", new Document("Expenses.doc", "30 KB", "Word Document"), work);
		TreeNode resume = new DefaultTreeNode("document", new Document("Resume.doc", "10 KB", "Word Document"), work);
		TreeNode refdoc = new DefaultTreeNode("document", new Document("RefDoc.pages", "40 KB", "Pages Document"), primefaces);
		
		//Pictures
		TreeNode barca = new DefaultTreeNode("picture", new Document("barcelona.jpg", "30 KB", "JPEG Image"), pictures);
		TreeNode primelogo = new DefaultTreeNode("picture", new Document("logo.jpg", "45 KB", "JPEG Image"), pictures);
		TreeNode optimus = new DefaultTreeNode("picture", new Document("optimusprime.png", "96 KB", "PNG Image"), pictures);
		
		//Music
		TreeNode turkish = new DefaultTreeNode(new Document("Turkish", "-", "Folder"), music);
		
		TreeNode cemKaraca = new DefaultTreeNode(new Document("Cem Karaca", "-", "Folder"), turkish);
		TreeNode erkinKoray = new DefaultTreeNode(new Document("Erkin Koray", "-", "Folder"), turkish);
		TreeNode mogollar = new DefaultTreeNode(new Document("Mogollar", "-", "Folder"), turkish);
		
		TreeNode nemalacak = new DefaultTreeNode("mp3", new Document("Nem Alacak Felek Benim", "1500 KB", "Audio File"), cemKaraca);
		TreeNode resimdeki = new DefaultTreeNode("mp3", new Document("Resimdeki Gozyaslari", "2400 KB", "Audio File"), cemKaraca);
		
		TreeNode copculer = new DefaultTreeNode("mp3", new Document("Copculer", "2351 KB", "Audio File"), erkinKoray);
		TreeNode oylebirgecer = new DefaultTreeNode("mp3", new Document("Oyle bir Gecer", "1794 KB", "Audio File"), erkinKoray);
		
		TreeNode toprakana = new DefaultTreeNode("mp3", new Document("Toprak Ana", "1536 KB", "Audio File"), mogollar);
		TreeNode bisiyapmali = new DefaultTreeNode("mp3", new Document("Bisi Yapmali", "2730 KB", "Audio File"), mogollar);
	}
	
	public TreeNode getRoot() {
		return root;
	}
}
					</pre>
				</p:tab>
			</p:tabView>
		</div>

	</ui:define>
</ui:composition>